<template>
  <div class="box">
    <div style="height: 150px"></div>
    <div class="login">
      <img src="~@/assets/login.png" alt="" />
      <h2>TMS智慧物流</h2>
      <h2>系统管理后台</h2>
      <div style="margin-top: 45px">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          style="float: left; width: 400px; margin-left: -25px"
        >
          <el-form-item prop="UserName">
            <el-input
              type="text"
              prefix-icon="iconfont el-icon-user"
              v-model="ruleForm.UserName"
              autocomplete="off"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="PassWord">
            <el-input
              type="PassWord"
              prefix-icon="iconfont el-icon-lock"
              v-model="ruleForm.PassWord"
              autocomplete="off"
              placeholder="请输入用户密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              size="medium"
              style="width: 300px; background-color: #30c2a5; color: #fff"
              @click="submitForm(ruleForm)"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("账号不能为空"));
      } else {
        if (this.ruleForm.UserName !== "") {
          this.$refs.ruleForm.validateField("UserName");
        }
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密码不能为空"));
      } else {
        if (this.ruleForm.PassWord !== "") {
          this.$refs.ruleForm.validateField("PassWord");
        }
        callback();
      }
    };
    return {
      //登录表单
      ruleForm: {
        UserName: "",
        PassWord: "",
      },
      //表单验证
      rules: {
        UserName: [{ validator: validateName, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  inject: ["reload"], //注入
  methods: {
    //IDS4登录
    submitForm() {
        this.axios({
          method:"post",
          url:"https://localhost:44367/connect/token",
          headers: { "content-type": "application/x-www-form-urlencoded" }, //把请求体参数类型换成x-www-form-urlencoded
          data:this.$qs.stringify({
            client_id:"Wz_App",
            client_secret:"E5Xd4yMqjP5kjWFKrYgySBju6JVfCzMyFp7n2QmMrME=",
            grant_type:"PassWord",
            scope:"Wz",
            //账号密码由用户输入
            UserName:this.ruleForm.UserName,
            PassWord:this.ruleForm.PassWord,
          }),
        }).catch(function(error){
          if(error!=null){
              alert("登录失败，账号或密码错误");
          }
        })
        .then((res)=>{
          if(res.data.access_token!=null){
            window.sessionStorage.setItem("token",res.data.access_token);
            window.sessionStorage.setItem("UserName",this.ruleForm.UserName);
            
            window.sessionStorage.getItem("UserName");
            //登录成功
            this.$message.success("登录成功");
            //跳转到指定页面
            this.$router.push({ path: "/Index/" });
          }
        });
    }
  },
  created() {},
};
</script>


<style>
.box {
  background-color: #f8f8f8;
  width: 100%;
  height: 100%;
}
.login {
  border: 2px solid #ebebeb;
  width: 450px;
  height: 530px;
  margin: auto;
  background-color: #fff;
}
.login img {
  margin-top: 20px;
}
.login h2 {
  color: #30c2a5;
}
</style>